<template>
  <div ref="fullScreenElement" id="dashboard" class="dashboard">
    <el-row>
      <el-col :span="24" style="margin-bottom: 0">
        <h1 class="title">
          <span  class="titlespan">Interferometer Testing Dashboard</span>
          <button class="fullscreen-btn" @click="toggleFullScreen">
            <i class="el-icon-full-screen"></i>
          </button>
        </h1>
      </el-col>
      <el-col :span="24" style="margin-bottom: 0">
        <h1 class="title">
          <span  class="titlespan2">VMO-240804269-062621</span>
        </h1>
      </el-col>
    </el-row>
    <el-row :gutter="20" class="content">
        <div class="box-grid right-grid">
          <div class="box"><xbarqlbj /></div>
          <div class="box"><xbargxgd /></div>
          <div class="box"><xbarddpy /></div>
          <div class="box"><normalityqlbj /></div>
          <div class="box"><normalitygxgd /></div>
          <div class="box"><normalityddpy /></div>
        </div>
    </el-row>
  </div>
</template>

<script>
import xbarqlbj from './xbarqlbj.vue';
import xbargxgd from './xbargxgd.vue';
import xbarddpy from './xbarddpy.vue';
import normalityqlbj from './normalityqlbj.vue';
import normalitygxgd from './normalitygxgd.vue';
import normalityddpy from './normalityddpy.vue';
import Xbargxgd from "@/views/workorder/bigscreen/xbargxgd.vue"
import Xbarddpy from "@/views/workorder/bigscreen/xbarddpy.vue"

export default {
  components: {
    Xbarddpy,
    Xbargxgd,
    xbarqlbj,
    xbargxgd,
    xbarddpy,
    normalityqlbj,
    normalitygxgd,
    normalityddpy,
  },
  methods: {
    toggleFullScreen() {
      const element = this.$refs.fullScreenElement;
      if (!document.fullscreenElement) {
        // 进入全屏
        element.requestFullscreen().catch(err => {
          console.error(err);
        });
      } else {
        // 退出全屏
        if (document.exitFullscreen) {
          document.exitFullscreen();
        }
      }
    }
  }
};
</script>

<style scoped>
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.dashboard {
  margin-bottom: 10px;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #29366b;
  /* 设置背景图像 */
  //background-image: url('/img/bg/bigbackgrand.gif');
  /* 平铺显示 */
  background-repeat: repeat;
  /* 背景覆盖整个容器 */
  background-size: auto;
  /* 边框 */
  /*border: 1px solid #ccc;*/
}

.content {
  flex: 1;
  display: flex;
  flex-wrap: nowrap;
}

.title {
  text-align: center;
  margin-bottom: 10px;
  color: #0A2447FF;
  font-size: 24px;
  position: relative;
}
.titlespan{
  font-size: 36px; /* 设置字体大小 */
  letter-spacing: 18px; /* 设置横向字母间距为字体大小的10% */
  position: relative; /* 使按钮定位相对 */
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  background-image: linear-gradient(to right, #ffffff, #ffffff);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  border: none;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
.titlespan2{
  font-size: 14px; /* 设置字体大小 */
  letter-spacing: 5px; /* 设置横向字母间距为字体大小的10% */
  position: relative; /* 使按钮定位相对 */
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  background-image: linear-gradient(to right, #ffffff, #ffffff);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  border: none;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
/* 动画效果 */
/*.title:hover {
  transform: scale(1.05);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}*/

.fullscreen-btn {
  position: absolute;
  top: 5px;
  right: 5px;
  background: none;
  cursor: pointer;
  font-size: 20px;
  color: white;
  transition: all 0.3s ease;
}

.box-area {
  padding: 1%;
  margin: 1% 2% 2% 2%;
  display: flex;
  flex-direction: column;
}

.subtitle {
  text-align: center;
  color: white;
  font-size: 18px;
  margin: 0 0 4% 0;
  position: relative;
  display: inline-block;
  background: linear-gradient(to right,
  #0A2447FF, #3498db);
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
}
/* 过渡效果 */
.subtitle:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}
/* 边框 */
.subtitle::before {
  content: "";
  position: absolute;
  top: -5px;
  left: -5px;
  right: -5px;
  bottom: -5px;
  border: 2px solid #2c3e50;
  border-radius: 12px;
  z-index: -1;
}
/* 阴影效果 */
.box-area .subtitle {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
/* 鼠标悬停效果 */
.box-area .subtitle:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}


.box-grid {
  display: grid;
  flex: 1;
  grid-auto-flow: dense; /* 确保每个 box 高度一致 */
  //transform: scale(1.05);
  box-shadow: 0 0 10px rgba(0, 0, 0, 100);
}
.box-grid .box {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
/* 鼠标悬停效果 */
.box-grid .box:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}

.left-grid {
  margin-top: 2%;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(3, 1fr); /* 确保每行高度一致 */
  grid-gap: 10px;
}

.right-grid {
  margin-top: 10px;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr); /* 确保每行高度一致 */
  grid-gap: 10px;
}

.box {
  height: 100%;
  background-color: rgba(230, 247, 255, 0.03); /* 设置背景色透明度为 20% */
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>

